Cypress: Panduan Pengujian End-to-End Terbaik untuk Aplikasi Web

Dalam lanskap pengembangan web yang berkembang pesat saat ini, memastikan kualitas dan keandalan aplikasi web adalah hal yang terpenting. Pengujian End-to-End (E2E) memainkan peran krusial dalam memverifikasi bahwa semua komponen aplikasi bekerja dengan lancar dari perspektif pengguna. Cypress telah muncul sebagai kerangka kerja pengujian E2E terkemuka, menawarkan pengalaman yang ramah pengembang, fitur-fitur andal, dan kinerja luar biasa. Panduan komprehensif ini akan memandu Anda melalui semua yang perlu Anda ketahui untuk memulai dengan Cypress dan menguji aplikasi web Anda secara efektif.

Apa itu Cypress?

Cypress adalah alat pengujian front-end generasi berikutnya yang dibuat untuk web modern. Tidak seperti kerangka kerja pengujian tradisional yang menjalankan tes di dalam browser, Cypress beroperasi langsung di dalam browser, memberi Anda kontrol dan visibilitas yang tak tertandingi ke dalam perilaku aplikasi Anda. Ini dirancang agar cepat, andal, dan mudah digunakan, menjadikannya pilihan populer di kalangan pengembang dan insinyur QA di seluruh dunia. Cypress ditulis dalam JavaScript dan dieksekusi di dalam browser, membuatnya sangat berkinerja dan menawarkan akses tak tertandingi ke bagian internal aplikasi.

Manfaat Utama Menggunakan Cypress

• Ramah Pengembang: Cypress menyediakan API yang bersih dan intuitif, membuatnya mudah untuk menulis dan melakukan debug pada tes.
• Time Travel: Cypress mengambil snapshot dari status aplikasi Anda selama setiap perintah tes, memungkinkan Anda untuk kembali ke masa lalu dan melihat apa yang sebenarnya terjadi pada titik mana pun.
• Pemuatan Ulang Real-Time: Cypress secara otomatis memuat ulang saat Anda membuat perubahan pada tes Anda, memberikan umpan balik instan.
• Penungguan Otomatis: Cypress secara otomatis menunggu elemen menjadi terlihat atau dapat berinteraksi sebelum melakukan tindakan, menghilangkan kebutuhan akan penungguan eksplisit.
• Kontrol Jaringan: Cypress memungkinkan Anda untuk melakukan stub pada permintaan dan respons jaringan, memungkinkan Anda untuk mensimulasikan skenario yang berbeda dan menguji penanganan kesalahan aplikasi Anda.
• Kemampuan Debugging: Cypress menyediakan alat debugging yang sangat baik, termasuk debugger yang kuat dan pesan kesalahan yang terperinci.
• Pengujian Lintas Browser: Cypress mendukung beberapa browser, termasuk Chrome, Firefox, Edge, dan Electron.
• Pengujian Headless: Jalankan tes dalam mode headless untuk eksekusi yang lebih cepat di lingkungan CI/CD.
• Asersi Bawaan: Cypress menyediakan serangkaian asersi bawaan yang kaya untuk memverifikasi perilaku yang diharapkan dari aplikasi Anda.

Instalasi dan Pengaturan

Memulai dengan Cypress sangatlah mudah. Berikut cara menginstalnya:

1. Prasyarat: Pastikan Anda telah menginstal Node.js dan npm (Node Package Manager) di sistem Anda. Anda dapat mengunduhnya dari situs web resmi Node.js.
2. Instal Cypress: Buka terminal atau command prompt Anda, navigasikan ke direktori proyek Anda, dan jalankan perintah berikut:

            npm install cypress --save-dev
            

              
                Copy
              
            
          

3. Buka Cypress: Setelah instalasi selesai, Anda dapat membuka Cypress Test Runner dengan menjalankan:

            npx cypress open
            

              
                Copy
              
            
          

Perintah ini akan meluncurkan Cypress Test Runner, yang menyediakan antarmuka grafis untuk menjalankan dan melakukan debug pada tes Anda.

Menulis Tes Cypress Pertama Anda

Mari kita buat tes sederhana untuk memverifikasi bahwa halaman beranda situs web dimuat dengan benar. Buat file baru bernama `example.cy.js` di direktori `cypress/e2e` proyek Anda.

            
// cypress/e2e/example.cy.js

describe('Tes Pertama Saya', () => {
  it('Mengunjungi Kitchen Sink', () => {
    cy.visit('https://example.cypress.io')
    cy.contains('type').click()
    cy.url().should('include', '/commands/actions')

    cy.get('.action-email')
      .type('fake@email.com')
      .should('have.value', 'fake@email.com')
  })
})

            

              
                Copy
              
            
          

Mari kita bedah tes ini:

• `describe()`: Mendefinisikan sebuah suite tes, yang merupakan kumpulan tes terkait.
• `it()`: Mendefinisikan sebuah kasus uji individual dalam suite tes.
• `cy.visit()`: Menavigasi ke URL yang ditentukan.
• `cy.contains()`: Menemukan elemen yang berisi teks yang ditentukan.
• `.click()`: Mengklik pada elemen yang dipilih.
• `cy.url()`: Mendapatkan URL saat ini dari halaman tersebut.
• `.should()`: Membuat asersi tentang status aplikasi.
• `cy.get()`: Memilih elemen menggunakan pemilih CSS.
• `.type()`: Mengetik teks ke dalam elemen yang dipilih.
• `.should('have.value', 'fake@email.com')`: Mengaserasi bahwa nilai elemen sama dengan 'fake@email.com'.

Jalankan tes ini di Cypress Test Runner untuk melihatnya beraksi. Anda akan melihat browser menavigasi ke situs web Cypress Kitchen Sink, mengklik tautan "type", dan memverifikasi URL.

Perintah Cypress

Cypress menyediakan berbagai macam perintah untuk berinteraksi dengan aplikasi Anda. Berikut adalah beberapa perintah yang paling umum digunakan:

• `cy.visit(url)`: Menavigasi ke URL yang ditentukan.
• `cy.get(selector)`: Memilih elemen menggunakan pemilih CSS.
• `cy.contains(content)`: Memilih elemen yang berisi teks yang ditentukan.
• `cy.click()`: Mengklik pada elemen yang dipilih.
• `cy.type(text)`: Mengetik teks ke dalam elemen yang dipilih.
• `cy.clear()`: Menghapus isi elemen input atau textarea.
• `cy.submit()`: Mengirimkan formulir.
• `cy.check()`: Memeriksa kotak centang atau tombol radio.
• `cy.uncheck()`: Membatalkan centang pada kotak centang.
• `cy.select(value)`: Memilih opsi dari dropdown.
• `cy.scrollTo(position)`: Menggulir halaman ke posisi yang ditentukan.
• `cy.trigger(event)`: Memicu peristiwa DOM pada elemen yang dipilih.
• `cy.request(url, options)`: Membuat permintaan HTTP ke URL yang ditentukan.
• `cy.intercept(route, handler)`: Mencegat permintaan HTTP yang cocok dengan rute yang ditentukan.
• `cy.wait(time)`: Menunggu selama waktu yang ditentukan.
• `cy.reload()`: Memuat ulang halaman saat ini.
• `cy.go(direction)`: Menavigasi ke halaman sebelumnya atau berikutnya dalam riwayat browser.
• `cy.url()`: Mendapatkan URL saat ini dari halaman tersebut.
• `cy.title()`: Mendapatkan judul halaman.
• `cy.window()`: Mendapatkan objek window.
• `cy.document()`: Mendapatkan objek document.
• `cy.viewport(width, height)`: Mengatur ukuran viewport.

Ini hanyalah beberapa dari banyak perintah yang tersedia di Cypress. Rujuk ke dokumentasi Cypress untuk daftar lengkap perintah dan opsinya.

Asersi dalam Cypress

Asersi digunakan untuk memverifikasi perilaku yang diharapkan dari aplikasi Anda. Cypress menyediakan serangkaian asersi bawaan yang kaya yang dapat Anda gunakan untuk memeriksa status elemen, URL, judul, dan lainnya. Asersi dirangkai setelah perintah Cypress menggunakan metode `.should()`.

Berikut adalah beberapa contoh asersi umum:

• `.should('be.visible')`: Mengaserasi bahwa sebuah elemen terlihat.
• `.should('not.be.visible')`: Mengaserasi bahwa sebuah elemen tidak terlihat.
• `.should('be.enabled')`: Mengaserasi bahwa sebuah elemen diaktifkan.
• `.should('be.disabled')`: Mengaserasi bahwa sebuah elemen dinonaktifkan.
• `.should('have.text', 'teks yang diharapkan')`: Mengaserasi bahwa sebuah elemen memiliki teks yang ditentukan.
• `.should('contain', 'teks yang diharapkan')`: Mengaserasi bahwa sebuah elemen berisi teks yang ditentukan.
• `.should('have.value', 'nilai yang diharapkan')`: Mengaserasi bahwa sebuah elemen memiliki nilai yang ditentukan.
• `.should('have.class', 'kelas yang diharapkan')`: Mengaserasi bahwa sebuah elemen memiliki kelas yang ditentukan.
• `.should('have.attr', 'nama atribut', 'nilai yang diharapkan')`: Mengaserasi bahwa sebuah elemen memiliki atribut dan nilai yang ditentukan.
• `.should('have.css', 'properti css', 'nilai yang diharapkan')`: Mengaserasi bahwa sebuah elemen memiliki properti dan nilai CSS yang ditentukan.
• `.should('have.length', panjang yang diharapkan)`: Mengaserasi bahwa sebuah elemen memiliki panjang yang ditentukan (misalnya, jumlah elemen dalam daftar).

Anda juga dapat membuat asersi kustom sesuai dengan kebutuhan spesifik Anda.

Praktik Terbaik untuk Menulis Tes Cypress

Mengikuti praktik terbaik dapat membantu Anda menulis tes Cypress yang lebih mudah dipelihara, andal, dan efisien. Berikut adalah beberapa rekomendasi:

• Tulis Tes yang Jelas dan Ringkas: Setiap tes harus fokus pada fungsionalitas atau skenario tertentu. Hindari menulis tes yang terlalu rumit yang sulit dipahami dan dipelihara.
• Gunakan Nama Tes yang Bermakna: Berikan nama deskriptif pada tes Anda yang dengan jelas menunjukkan apa yang sedang diuji.
• Hindari Nilai Hardcoding: Gunakan variabel atau file konfigurasi untuk menyimpan nilai yang mungkin berubah seiring waktu.
• Gunakan Perintah Kustom: Buat perintah kustom untuk merangkum logika yang dapat digunakan kembali dan membuat tes Anda lebih mudah dibaca.
• Isolasi Tes: Setiap tes harus independen dari tes lain. Hindari mengandalkan status aplikasi dari tes sebelumnya.
• Bersihkan Setelah Tes: Atur ulang status aplikasi setelah setiap tes untuk memastikan bahwa tes berikutnya dimulai dari keadaan bersih.
• Gunakan Atribut Data: Gunakan atribut data (misalnya, `data-testid`) untuk memilih elemen dalam tes Anda. Atribut data lebih kecil kemungkinannya untuk berubah daripada kelas atau ID CSS, membuat tes Anda lebih tahan terhadap perubahan pada UI.
• Hindari Penungguan Eksplisit: Cypress secara otomatis menunggu elemen menjadi terlihat atau dapat berinteraksi. Hindari menggunakan penungguan eksplisit (misalnya, `cy.wait()`) kecuali benar-benar diperlukan.
• Uji Alur Pengguna: Fokus pada pengujian alur pengguna daripada komponen individual. Ini akan membantu Anda memastikan bahwa aplikasi Anda berfungsi dengan benar dari perspektif pengguna.
• Jalankan Tes Secara Teratur: Integrasikan tes Cypress ke dalam pipeline CI/CD Anda dan jalankan secara teratur untuk menangkap bug di awal proses pengembangan.

Teknik Cypress Tingkat Lanjut

Stubbing dan Mocking

Cypress memungkinkan Anda untuk melakukan stub pada permintaan dan respons jaringan, memungkinkan Anda untuk mensimulasikan skenario yang berbeda dan menguji penanganan kesalahan aplikasi Anda. Ini sangat berguna untuk menguji fitur yang bergantung pada API atau layanan eksternal.

Untuk melakukan stub pada permintaan jaringan, Anda dapat menggunakan perintah `cy.intercept()`. Misalnya, kode di bawah ini melakukan stub pada permintaan GET ke `/api/users` dan mengembalikan respons tiruan:

            
cy.intercept('GET', '/api/users', {
  statusCode: 200,
  body: [
    { id: 1, name: 'John Doe' },
    { id: 2, name: 'Jane Doe' }
  ]
}).as('getUsers')

            

              
                Copy
              
            
          

Anda kemudian dapat menunggu permintaan yang dicegat menggunakan `cy.wait('@getUsers')` dan memverifikasi bahwa aplikasi Anda menangani respons tiruan dengan benar.

Bekerja dengan Local Storage dan Cookie

Cypress menyediakan perintah untuk berinteraksi dengan local storage dan cookie. Anda dapat menggunakan perintah ini untuk mengatur, mendapatkan, dan membersihkan local storage dan cookie dalam tes Anda.

Untuk mengatur item local storage, Anda dapat menggunakan perintah `cy.window()` untuk mengakses objek window dan kemudian menggunakan metode `localStorage.setItem()`. Contohnya:

            
cy.window().then((win) => {
  win.localStorage.setItem('myKey', 'myValue')
})

            

              
                Copy
              
            
          

Untuk mendapatkan item local storage, Anda dapat menggunakan perintah `cy.window()` dan kemudian menggunakan metode `localStorage.getItem()`. Contohnya:

            
cy.window().then((win) => {
  const value = win.localStorage.getItem('myKey')
  expect(value).to.equal('myValue')
})

            

              
                Copy
              
            
          

Untuk mengatur cookie, Anda dapat menggunakan perintah `cy.setCookie()`. Contohnya:

            
cy.setCookie('myCookie', 'myCookieValue')

            

              
                Copy
              
            
          

Untuk mendapatkan cookie, Anda dapat menggunakan perintah `cy.getCookie()`. Contohnya:

            
cy.getCookie('myCookie').should('have.property', 'value', 'myCookieValue')

            

              
                Copy
              
            
          

Menangani Unggahan File

Cypress menyediakan plugin bernama `cypress-file-upload` yang menyederhanakan unggahan file dalam tes Anda. Untuk menginstal plugin, jalankan perintah berikut:

            npm install -D cypress-file-upload
            

              
                Copy
              
            
          

Kemudian, tambahkan baris berikut ke file `cypress/support/commands.js` Anda:

            
import 'cypress-file-upload';

            

              
                Copy
              
            
          

Anda kemudian dapat menggunakan perintah `cy.uploadFile()` untuk mengunggah file. Contohnya:

            
cy.get('input[type="file"]').attachFile('example.txt')

            

              
                Copy
              
            
          

Bekerja dengan IFrame

Menguji IFrame bisa jadi rumit, tetapi Cypress menyediakan cara untuk berinteraksi dengannya. Anda dapat menggunakan perintah `cy.frameLoaded()` untuk menunggu IFrame dimuat, dan kemudian menggunakan perintah `cy.iframe()` untuk mendapatkan objek dokumen IFrame.

            
cy.frameLoaded('#myIframe')
cy.iframe('#myIframe').find('button').click()

            

              
                Copy
              
            
          

Cypress dan Integrasi Berkelanjutan/Penyebaran Berkelanjutan (CI/CD)

Mengintegrasikan Cypress ke dalam pipeline CI/CD Anda sangat penting untuk memastikan kualitas aplikasi Anda. Anda dapat menjalankan tes Cypress dalam mode headless di lingkungan CI/CD Anda. Berikut caranya:

1. Instal Cypress: Pastikan Cypress diinstal sebagai dependensi dalam proyek Anda.
2. Konfigurasi CI/CD: Konfigurasikan pipeline CI/CD Anda untuk menjalankan tes Cypress setelah setiap build.
3. Jalankan Cypress Headlessly: Gunakan perintah `cypress run` untuk menjalankan tes Cypress dalam mode headless.

Contoh konfigurasi CI/CD (menggunakan GitHub Actions):

            
name: Tes Cypress

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  cypress-run:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16
      - name: Install dependencies
        run: npm install
      - name: Cypress run
        uses: cypress-io/github-action@v5
        with:
          start: npm start
          wait-on: 'http://localhost:3000'

            

              
                Copy
              
            
          

Konfigurasi ini akan menjalankan tes Cypress setiap kali kode didorong ke cabang `main` atau permintaan tarik dibuat terhadap cabang `main`. Aksi `cypress-io/github-action` menyederhanakan proses menjalankan tes Cypress di GitHub Actions.

Debugging Tes Cypress

Cypress menyediakan alat debugging yang sangat baik untuk membantu Anda mengidentifikasi dan memperbaiki masalah dalam tes Anda. Berikut adalah beberapa tips untuk debugging tes Cypress:

• Gunakan Cypress Test Runner: Cypress Test Runner menyediakan antarmuka visual untuk menjalankan dan melakukan debug pada tes Anda. Anda dapat menelusuri tes Anda satu perintah pada satu waktu, memeriksa status aplikasi, dan melihat pesan kesalahan yang terperinci.
• Gunakan Perintah `cy.pause()`: Perintah `cy.pause()` menjeda eksekusi tes Anda dan memungkinkan Anda untuk memeriksa status aplikasi di alat pengembang browser.
• Gunakan Perintah `cy.debug()`: Perintah `cy.debug()` mencetak elemen yang dipilih ke konsol, memungkinkan Anda untuk memeriksa properti dan atributnya.
• Gunakan Alat Pengembang Browser: Alat pengembang browser menyediakan banyak informasi tentang aplikasi Anda, termasuk DOM, permintaan jaringan, dan log konsol.
• Baca Pesan Kesalahan dengan Cermat: Cypress menyediakan pesan kesalahan terperinci yang dapat membantu Anda mengidentifikasi penyebab kesalahan. Perhatikan pesan kesalahan dan jejak tumpukan (stack trace).

Cypress vs. Kerangka Kerja Pengujian Lainnya

Meskipun Cypress adalah kerangka kerja pengujian end-to-end yang kuat, penting untuk memahami perbandingannya dengan opsi populer lainnya. Berikut adalah tinjauan singkat:

• Selenium: Selenium adalah kerangka kerja pengujian otomatisasi yang banyak digunakan. Meskipun fleksibel dan mendukung banyak bahasa, pengaturannya dan pemeliharaannya bisa rumit. Cypress menawarkan pengalaman yang lebih sederhana dan lebih ramah pengembang, terutama untuk aplikasi berbasis JavaScript.
• Puppeteer: Puppeteer adalah pustaka Node yang menyediakan API tingkat tinggi untuk mengontrol Chrome atau Chromium tanpa antarmuka (headless). Ini sangat baik untuk scraping dan mengotomatiskan tugas browser tetapi mungkin memerlukan lebih banyak konfigurasi manual dibandingkan dengan Cypress untuk pengujian end-to-end.
• Playwright: Playwright adalah kerangka kerja otomatisasi lintas-browser lain yang dikembangkan oleh Microsoft. Ini memiliki kesamaan dengan Puppeteer tetapi menawarkan dukungan browser yang lebih luas. Cypress memiliki debugger time-traveling yang unik dan pengalaman pengujian yang lebih terintegrasi.

Pilihan kerangka kerja tergantung pada kebutuhan dan persyaratan spesifik proyek Anda. Cypress adalah pilihan yang sangat baik untuk aplikasi web modern yang memerlukan pengujian end-to-end yang cepat, andal, dan ramah pengembang.

Contoh Dunia Nyata dari Cypress dalam Aksi

Mari kita jelajahi beberapa contoh dunia nyata tentang bagaimana Cypress dapat digunakan untuk menguji berbagai jenis aplikasi web:

Menguji Aplikasi E-commerce

Anda dapat menggunakan Cypress untuk menguji berbagai alur pengguna dalam aplikasi e-commerce, seperti:

• Mencari produk
• Menambahkan produk ke keranjang
• Checkout dan melakukan pemesanan
• Mengelola pengaturan akun

Berikut adalah contoh tes Cypress yang memverifikasi bahwa pengguna dapat berhasil menambahkan produk ke keranjang mereka:

            
it('Menambahkan produk ke keranjang', () => {
  cy.visit('/products')
  cy.get('.product-card').first().find('button').click()
  cy.get('.cart-count').should('have.text', '1')
})

            

              
                Copy
              
            
          

Menguji Aplikasi Media Sosial

Anda dapat menggunakan Cypress untuk menguji interaksi pengguna dalam aplikasi media sosial, seperti:

• Membuat postingan baru
• Menyukai postingan
• Memberi komentar pada postingan
• Mengikuti pengguna lain

Berikut adalah contoh tes Cypress yang memverifikasi bahwa pengguna dapat berhasil membuat postingan baru:

            
it('Membuat postingan baru', () => {
  cy.visit('/profile')
  cy.get('#new-post-textarea').type('Halo, dunia!')
  cy.get('#submit-post-button').click()
  cy.get('.post').first().should('contain', 'Halo, dunia!')
})

            

              
                Copy
              
            
          

Menguji Aplikasi Perbankan

Untuk aplikasi perbankan, Cypress dapat digunakan untuk menguji fungsionalitas kritis seperti:

• Masuk dengan aman
• Memeriksa saldo akun
• Mentransfer dana
• Mengelola penerima manfaat

Sebuah tes untuk memverifikasi transfer dana mungkin terlihat seperti ini (dengan stubbing yang sesuai untuk keamanan):

            
it('Berhasil mentransfer dana', () => {
  cy.visit('/transfer')
  cy.get('#recipient-account').type('1234567890')
  cy.get('#amount').type('100')
  cy.intercept('POST', '/api/transfer', { statusCode: 200, body: { success: true } }).as('transfer')
  cy.get('#transfer-button').click()
  cy.wait('@transfer')
  cy.get('.success-message').should('be.visible')
})

            

              
                Copy
              
            
          

Kesimpulan

Cypress adalah kerangka kerja pengujian end-to-end yang kuat dan serbaguna yang dapat membantu Anda memastikan kualitas dan keandalan aplikasi web Anda. API-nya yang ramah pengembang, fitur-fitur andal, dan kinerja luar biasa menjadikannya pilihan populer di kalangan pengembang dan insinyur QA di seluruh dunia. Dengan mengikuti praktik terbaik yang diuraikan dalam panduan ini, Anda dapat menulis tes Cypress yang efektif yang akan membantu Anda menangkap bug di awal proses pengembangan dan memberikan perangkat lunak berkualitas tinggi kepada pengguna Anda.

Seiring aplikasi web terus berkembang, pentingnya pengujian end-to-end akan semakin meningkat. Merangkul Cypress dan mengintegrasikannya ke dalam alur kerja pengembangan Anda akan memberdayakan Anda untuk membangun pengalaman web yang lebih kuat, andal, dan ramah pengguna.